
import React from 'react';
import * as THREE from 'three';
import { Card, Form, Switch } from "antd";
import { useElement } from "tools/hooks/useElement";
import { useProperty } from 'tools/hooks/useProperty';
import CastShadow from './formItems/CastShadow';
import ReceiveShadow from './formItems/ReceiveShadow';
import Position from './formItems/Position';
import Rotation from './formItems/Rotation';
import Scale from './formItems/Scale';
import { GLTF } from 'components/Three/Controller/State/Element';

/** 这是Three.js中大部分对象的基类 */
export default function Object3D() {

    const { element } = useElement();

    const object3D = React.useMemo<THREE.Object3D | undefined>(() => {
        if (!element) return undefined
        switch (element.type) {
            case 'gltf':
                return (element.object3D as GLTF).scene.scene as THREE.Object3D;

            default:
                return element.object3D as THREE.Object3D;
        }
    }, [element])

    const { setProperty } = useProperty(object3D)

    if (!object3D) return <></>;

    return (
        <Card title="三维物体">
            <Form
                layout="horizontal"
                labelCol={{ span: 9 }}
                wrapperCol={{ span: 15 }}
            >
                {/* <Form.Item label='ID' tooltip='表示该对象实例ID的唯一数字'>
                    <Text ellipsis={{ tooltip: object3D.id }} >{object3D.id}</Text>
                </Form.Item> */}

                <Form.Item label='是否可见' tooltip='可见性。这个值为true时，物体将被渲染。' >
                    <Switch
                        size='small'
                        checked={object3D.visible}
                        onChange={setProperty('visible')}
                    />
                </Form.Item>

                <CastShadow object3D={object3D} />{/* 产生阴影 */}

                <ReceiveShadow object3D={object3D} />{/* 接受阴影 */}

                <Position/>{/* 位置 */}

                <Rotation object3D={object3D}/>{/* 旋转 */}

                <Scale object3D={object3D}/>{/* 缩放 */}
            </Form>
        </Card>
    )
}

